import { LucideIcon } from 'lucide-react'

interface IconWrapperProps {
  icon: LucideIcon
  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
  variant?: 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'error'
  className?: string
}

export default function IconWrapper({ 
  icon: Icon, 
  size = 'md', 
  variant = 'default',
  className = '' 
}: IconWrapperProps) {
  const sizeMap = {
    xs: 12,
    sm: 16,
    md: 20,
    lg: 24,
    xl: 32
  }

  const variantClasses = {
    default: 'text-gray-600',
    primary: 'text-blue-600',
    secondary: 'text-gray-500',
    success: 'text-green-600',
    warning: 'text-yellow-600',
    error: 'text-red-600'
  }

  return (
    <Icon 
      size={sizeMap[size]} 
      className={`${variantClasses[variant]} ${className}`}
    />
  )
}

// 带背景的图标组件
export function IconWithBackground({ 
  icon: Icon, 
  size = 'md', 
  variant = 'default',
  className = '' 
}: IconWrapperProps) {
  const sizeClasses = {
    xs: 'w-6 h-6',
    sm: 'w-8 h-8',
    md: 'w-10 h-10',
    lg: 'w-12 h-12',
    xl: 'w-16 h-16'
  }

  const iconSizeMap = {
    xs: 12,
    sm: 16,
    md: 20,
    lg: 24,
    xl: 32
  }

  const variantClasses = {
    default: 'bg-gray-100 text-gray-600',
    primary: 'bg-blue-100 text-blue-600',
    secondary: 'bg-gray-50 text-gray-500',
    success: 'bg-green-100 text-green-600',
    warning: 'bg-yellow-100 text-yellow-600',
    error: 'bg-red-100 text-red-600'
  }

  return (
    <div className={`
      ${sizeClasses[size]} 
      ${variantClasses[variant]} 
      rounded-lg flex items-center justify-center
      ${className}
    `}>
      <Icon size={iconSizeMap[size]} />
    </div>
  )
}
